<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站小案例</title>
    <link rel="stylesheet" href="webstyle.css">
    <!--引进字体图标文件-->
    <link rel="stylesheet" href="themify-icons.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>
<body>
<div class="banner">


    <!--头部区域-->
    <div>
        <div class="header">
            <a href="#" class="h-logo"><img src="images/logo.png" alt=""/></a>
            <div class="h-nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">
                        <a href="#">关于我们<i class="iconfont icon-xiala"></i></a>
                        <div class="down">
                            <div class="list">
                                <p>公司简介</p>
                            </div>
                            <div class="list">
                                <p>团队介绍</p>
                            </div>
                        </div>
                    </li>
                    <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">
                        <a href="#">解决方案<i class="iconfont icon-xiala"></i></a>
                        <div class="down">
                            <div class="list">
                                <p>公司简介</p>
                            </div>
                            <div class="list">
                                <p>团队介绍</p>
                            </div>
                            <div class="list">
                                <p>公司简介</p>
                            </div>
                        </div>
                    </li>
                    <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">
                        <a href="#">成功案例<i class="iconfont icon-xiala"></i></a>
                        <div class="down">
                            <div class="list">
                                <p>公司简介</p>
                            </div>
                            <div class="list">
                                <p>团队介绍</p>
                            </div>
                            <div class="list">
                                <p>公司简介</p>
                            </div>
                        </div>
                    </li>
                    <li><a href="#"><p>新闻中心</p></a></li>
                    <li><a href="#"><p>联系我们</p></a></li>
                </ul>
            </div>
            <div class="h-tel">
                <p>全国统一电话<br><span>400-888-8888</span></p>
            </div>
        </div>
        <script src="jquery-3.6.0.js"></script>
        <script>
            // console.log($('.down').width())
            // console.log($('.down').height())

            function showSubMenu(li) {
                $('.down',li).stop().slideDown(300, 'linear', function () {
                    console.log('下来了')
                })
                // li.getElementsByClassName("down")[0].style.display = 'block';

            }

            function hideSubMenu(li) {
                $('.down',li).stop().slideUp(300, 'linear', function () {
                    console.log('下来了')
                })
                // li.getElementsByClassName("down")[0].style.display = 'none';
            }
        </script>

        <!--回到顶部-->
        <div class="go-top">
            <i class="ti-angle-right"></i>
        </div>
        <script>
            const topDiv = document.getElementsByClassName('header')[0];
            const goTop = document.getElementsByClassName('go-top')[0];
            window.onscroll = function () {
                let flag = document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
                if (flag) {
                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
                    // scrollTop表示滚动后距离顶端多少
                    // 当距离页面顶端大于164px的距离时会让导航栏浮动且宽度100%适配浏览器，否则导航栏采用相对定位，宽度变成1040px
                    if (document.documentElement.scrollTop >= 80) {
                        topDiv.style.position = "fixed";
                        topDiv.style.marginTop = "0px";
                        topDiv.style.background = "#fff";
                        goTop.style.display = "block";
                    } else if (scrollTop === 0) {
                        topDiv.style.position = "relative";
                        topDiv.style.backgroundColor = "transparent";
                        goTop.style.display = "none";
                        //     topDiv.style.marginTop = "190px";
                        //     topDiv.style.width = "1040px";

                    }
                }
            }

            //点击go-top滚动条回到顶部
            goTop.onclick = function () {
                window.scrollTo({
                    top: 0,
                    behavior: "smooth"
                })
            }
        </script>
    </div>
    <!--动图区域-->
    <div class="poster">
        <div class="graph">
            <img src="images/top_service.png" alt=""/>
        </div>
        <div class="b-text">
            <div class="b-title">
                <p class="b-title1">智慧医疗系统</p>
                <p class="b-title2">新型护理方案</p>
            </div>
            <div>
                <p class="b-title3">智慧医疗生态运营创领企业</p>
            </div>
            <div class="b-title4">
                <p>Smartmedicas</p>
                <p>Newnursingpla</p>
                <p>Smartmedi</p>
            </div>
        </div>
    </div>
    <!--解决方案区域-->
    <div class="plan">
        <div class="title">
            <h3>智慧医疗·解决方案</h3>
            <p>Solution Show</p>
            <b></b>
        </div>
        <ul class="pro-con">
            <li>
                <img src="images/doctor_1.png" alt=""/>
                <div class="box">
                    <img src="images/shebei.png" alt=""/>
                    <b></b>
                    <h4>智慧医疗</h4>
                    <p>专注健康医疗，关注于医院，服务于校园，校园BOT运营模式...</p>
                    <a href="#">了解详情</a>
                </div>
            </li>
            <li>
                <img src="images/doctor_2.png" alt=""/>
                <div class="box">
                    <img src="images/car.png" alt=""/>
                    <b></b>
                    <h4>快速呼救</h4>
                    <p>专注健康医疗，关注于医院，服务于校园，校园BOT运营模式...</p>
                    <a href="#">了解详情</a>
                </div>
            </li>
            <li>
                <img src="images/doctor_4.png" alt=""/>
                <div class="box">
                    <img src="images/lunyi.png" alt=""/>
                    <b></b>
                    <h4>一流服务</h4>
                    <p>专注健康医疗，关注于医院，服务于校园，校园BOT运营模式...</p>
                    <a href="#">了解详情</a>
                </div>
            </li>
            <li>
                <img src="images/doctor_3.png" alt=""/>
                <div class="box">
                    <img src="images/shebei.png" alt=""/>
                    <b></b>
                    <h4>健康生活</h4>
                    <p>专注健康医疗，关注于医院，服务于校园，校园BOT运营模式...</p>
                    <a href="#">了解详情</a>
                </div>
            </li>
        </ul>
        <a href="#" class="btn">查看更多</a>
    </div>
    <!--公司简介-->
    <div class="intr">
        <div class="intr-content">
            <div class="title">
                <h3>公司简介</h3>
                <p>Company Profile</p>
                <b></b>
            </div>
            <p>我们医疗科技核心团队人才济济，作为一家高科技企业，公司非常重视
                海内外创新人才的引进与培养， 拥有一支专业的研发人才队伍，并在
                北京、上海、成都、清迈等地设有办事处，业务区域覆盖全国。
                我们医疗科技核心团队人才济济，作为一家高科技企业，拥有一支专业
                的研发人才队伍，并在 北京、上海、成都、清迈等地设有办事处，业
                区域覆盖全国。</p>
            <p>公司凭借雄厚的技术力量，把美国智慧医疗与大陆医院实际情况相结合，
                硏发出拥有自主知识产权的产品。公司产品涵盖智慧医院（智能导诊、智慧病房、智能管理）、
                健康大数据、高压氧管理系统，技术先进。公司凭借雄厚的技术力量，把美国智慧医疗与大陆医院实际情况相结合，
                公司产品涵盖智慧医院、健康大数据、高压氧管理系统，技术先进。</p>
            <div class="intr-list">
                <dl>
                    <dt>100<span>万家</span></dt>
                    <dd>提供解决方案及服务</dd>
                </dl>
                <dl>
                    <dt>100<span>万家</span></dt>
                    <dd>提供解决方案及服务</dd>
                </dl>
                <dl>
                    <dt>100<span>万家</span></dt>
                    <dd>提供解决方案及服务</dd>
                </dl>
                <dl>
                    <dt>100<span>万家</span></dt>
                    <dd>提供解决方案及服务</dd>
                </dl>
            </div>
        </div>
        <a href="#" class="btn">查看更多</a>
    </div>
    <!--新闻资讯-->
    <div class="new-banner">
        <div class="news">
            <div class="title">
                <h3>新闻资讯</h3>
                <p>News Information</p>
                <b></b>
            </div>
            <div class="news-content">
                <div class="left">
                    <img src="images/single_blog_5.png" alt=""/>
                    <div class="left-title">
                        <p class="tit">2020公司消暑三亚凉游</p>
                        <span class="time">2020-07-15</span>
                    </div>
                    <p class="text">
                        机场离景区市区还是挺远的，如果是自己来的话要注意对好机票时间规划好交通，至于我当天是到的比较晚，好在思思是24小时接机~然后入住思思安排的酒店，一推门真的非常惊喜！</p>
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="time">
                                    <p>10-27</p>
                                    <p class="year">2020</p>
                                </div>
                                <b></b>
                                <div class="text">
                                    <p class="title">"五彩缤纷深圳湾" 鹏城佳景汇南山</p>
                                    <p class="detail">风景秀丽的三亚有着全海南岛最美丽的海滨，以其特有的海天景色、阳光沙滩和椰风海韵吸引着我们，这里是最值得花时间游览的地方。</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="time">
                                    <p>10-27</p>
                                    <p class="year">2020</p>
                                </div>
                                <b></b>
                                <div class="text">
                                    <p class="title">"五彩缤纷深圳湾" 鹏城佳景汇南山</p>
                                    <p class="detail">风景秀丽的三亚有着全海南岛最美丽的海滨，以其特有的海天景色、阳光沙滩和椰风海韵吸引着我们，这里是最值得花时间游览的地方。</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="time">
                                    <p>10-27</p>
                                    <p class="year">2020</p>
                                </div>
                                <b></b>
                                <div class="text">
                                    <p class="title">"五彩缤纷深圳湾" 鹏城佳景汇南山</p>
                                    <p class="detail">风景秀丽的三亚有着全海南岛最美丽的海滨，以其特有的海天景色、阳光沙滩和椰风海韵吸引着我们，这里是最值得花时间游览的地方。</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <a href="#" class="btn">查看更多</a>
        </div>
    </div>
    <!--底部区域-->
    <div class="footer">
        <div class="footer1">
            <ul>
                <li>
                    <img class="gather" src="images/logo.png" alt=""/>
                    <p class="text">Lorem ipsum dolor sit
                        amet, consectetur
                        adipiscing elit, sed do
                        eiusmod tempor</p>
                    <div class="social_logo">
                        <a href="#"><i class="ti-facebook"></i></a>
                        <a href="#"><i class="ti-twitter"></i> </a>
                        <a href="#"><i class="ti-instagram"></i></a>
                        <a href="#"><i class="ti-skype"></i></a>
                    </div>
                </li>
                <li>
                    <h4 class="gather">Quick Links</h4>
                    <a href="#">
                        <p>About us</p><br>
                        <p>Department</p><br>
                        <p>Online payment</p><br>
                        <p>Careers</p><br>
                        <p>Department</p><br>
                    </a>
                </li>
                <li>
                    <h4 class="gather">Explore</h4>
                    <a href="#">
                        <p>In the community</p><br>
                        <p>IU health foundation</p><br>
                        <p>Department</p><br>
                        <p>In the community</p><br>
                        <p>Online payment</p><br>
                    </a>
                </li>
                <li>
                    <h4 class="gather">Resources</h4>
                    <a href="#">
                        <p>Lights were season</p><br>
                        <p>Lights were season</p><br>
                        <p>Lights were seas</p><br>
                        <p>Lights were seaso</p><br>
                        <p>Lights were seaso</p><br>
                    </a>
                </li>
                <li class="letter">
                    <h4 class="gather">Newsletter</h4>
                    <p>Seed good winged wherein which night multiply
                        midst does not fruitful</p>
                    <form action="./login" class="form-inline" name="inlineForm" target="result" autocomplete="off">
                        <!--获得焦点，input空--><!--失去焦点，input填入Your Email Address-->
                        <div>
                            <label>
                                <input class="form-control" name="email" id="email"
                                       placeholder="请输入你的邮箱"
                                       onfocus="this.placeholder=''"
                                       onblur="this.placeholder='请输入你的邮箱'"
                                       required type="email"
                                       pattern="^([a-zA-Z0-9]+[_|_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$">
                            </label>
                        </div>
                        <div>
                            <button class="click-btn" name="button"><i class="ti-angle-right"></i>
                            </button>
                        </div>
                        <!--用于信息提示节点-->
                        <div class="msg" id="message"></div>
                    </form>
                    <!--利用Iframe无刷新提交-->
                    <iframe name="result" id="result" style="display:none;"></iframe>

                    <script>
                        (function () {
                            var form = document.forms.inlineForm,
                                nmsg = document.getElementById('message');

                            //在信息节点上设置提示信息的逻辑
                            function showMessage(clazz, msg) {
                                if (!clazz) {
                                    nmsg.innerHTML = '';
                                    nmsg.classList.remove('j-suc');
                                    nmsg.classList.remove('j-err');
                                    nmsg.classList.remove('j-pos');
                                } else {
                                    nmsg.innerHTML = msg;
                                    nmsg.classList.add(clazz);
                                }
                            }

                            //在后台信息返回之前，禁用登录按钮，防止多次提交
                            function disableSubmit(disabled) {
                                form.button.disabled = !!disabled;
                                var method = !disabled ? 'remove' : 'add';
                                form.button.classList[method]('j-disabled');
                            }

                            //输入验证失败的逻辑
                            function invalidInput(node, msg) {
                                showMessage('j-err', msg);
                                node.classList.add('j-error');
                                node.focus();
                            }

                            //正在提交的逻辑
                            function postInput(node, msg) {
                                showMessage('j-pos', msg);
                                node.classList.add('j-post');
                                node.focus();
                            }

                            //清除之前验证状态的办法
                            function clearInvalid(node) {
                                showMessage();
                                node.classList.remove('j-error');
                            }

                            //验证邮箱，invalid输入框验证不成功
                            form.email.addEventListener(
                                'invalid', function (event) {
                                    event.preventDefault();
                                    var input = form.email;
                                    invalidInput(input, '请输入正确的邮箱');
                                }
                            );

                            //用户修改输入框内容后，还原提交按钮
                            form.addEventListener(
                                'input', function (event) {
                                    // 还原错误状态
                                    clearInvalid(event.target);
                                    // 还原提交按钮状态
                                    disableSubmit(false);
                                }
                            );

                            form.addEventListener(
                                'submit', function (event) {
                                    // 密码验证
                                    var input = form.email,
                                        pswd = input.value,
                                        emsg = '';
                                    if (!/[@]/i.test(pswd)) {
                                        emsg = '邮箱地址必须包含"@"';
                                    }
                                    // 密码验证不通过
                                    if (!!emsg) {
                                        event.preventDefault();
                                        invalidInput(input, emsg);
                                        return;
                                    }
                                    // 禁用提交按钮
                                    disableSubmit(true);
                                    postInput(input, '正在提交...');
                                    window.setTimeout(slowAlert, 2000);
                                }
                            );

                            function slowAlert() {
                                showMessage('j-suc', '提交成功！');
                                form.reset();
                            }

                            var frame = document.getElementById('result');
                            frame.addEventListener(
                                'load', function (event) {
                                    try {
                                        var result = JSON.parse(
                                            frame.contentWindow.document.body.textContent
                                        );
                                        // 还原提交按钮状态
                                        disableSubmit(false);
                                        // 识别登录结果
                                        if (result.code === 200) {
                                            showMessage('j-suc', '提交成功！');
                                            form.reset();
                                        }
                                    } catch (ex) {
                                        // ignore
                                    }
                                }
                            );

                        })();
                    </script>
                </li>
            </ul>
        </div>
        <div class="footer2">
            <div class="end">
<!--                <p>Copyright © 2021.Company name All rights reserved.</p>-->
                <p style="font-size: 14px">©2021mangotea首页模板制作
                    版权与免责声明
                    版权申诉</p>
                <div class="social_logo">
                    <a href="#"><i class="ti-facebook"></i></a>
                    <a href="#"><i class="ti-twitter"></i> </a>
                    <a href="#"><i class="ti-instagram"></i></a>
                    <a href="#"><i class="ti-skype"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
